<template>
    <div class="home">
        <el-container>
            <el-header class="home-header">
                <span style="margin:0 auto">HI:{{user.nickname}}
                    <el-button type="warning" circle @click="logout">登出</el-button>
            </span></el-header>
            <el-container class="home-body">
                <el-aside class="home-aside">
                    <el-menu :default-active="$route.name" router="true">

                        <el-submenu v-for="j in groups" :index="j.index" :key="j.index">
                            <div slot="title"><i class="el-icon-goods">{{j.title}}</i></div>
                            <!--<el-menu-item v-for="i in mainRoutes.children"-->
                            <!--:key="i.name" :index="i.name"-->
                            <!--v-if="(i.groupIndex === j.index)">-->
                            <!--<i class="el-icon-document"></i>-->
                            <!--<span slot="title">{{i.description}}</span>-->
                            <!--</el-menu-item>-->
                            <el-menu-item v-for="i in routes(j)"
                                          :key="i.name" :index="i.name">
                                <i class="el-icon-document"></i>
                                <span slot="title">{{i.description}}</span>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main class="home-main">
                    <router-view></router-view>
                </el-main>
            </el-container>
            <el-footer class="home-footer"></el-footer>
        </el-container>

    </div>
</template>

<script>

    import {mainRoutes} from "../router";
    import {mapState} from 'vuex'

    export default {
        name: 'home',
        components: {},
        data: function () {
            return {
                groups: [
                    {
                        index: 0, title: '消息总览'
                    },
                    {
                        index: 1, title: '一区:FTP'
                    },
                    {
                        index: 2, title: '二区:聊天业务'
                    },
                    {
                        index: 3, title: '三区:游戏'
                    },
                    {
                        index: 4, title: '四区:活动'
                    },
                ],
                mainRoutes: mainRoutes,

            }
        },
        computed: {
            ...mapState(['user']),

        },
        methods: {
            routes: function (jj) {

                return mainRoutes.children.filter(r => r.groupIndex === jj.index);

            },
            logout: function () {
                this.$http({
                    url: '/logout',
                    method: 'get',
                }).then(res => {
                    this.$message.warning(JSON.stringify(res.data));
                    setTimeout(()=>this.$router.push('/welcome'),3000);
                });

            }
        },
        mounted: function () {
            //mainRoutes.children

        }
    }
</script>
<style>
    .home {

    }

    .home-header {
        background-color: darkolivegreen;
    }

    .home-body {
        height: 580px;
    }

    .home-footer {
        background-color: aquamarine;
    }

    .home-aside {
        background-color: coral;
    }

    .home-main {
        background-color: azure;
    }

</style>
